<template>
  <el-card class="box-card" shadow="never">
    <div slot="header" class="clearfix">
      <el-input v-model="paperName" placeholder="请输入试卷名称" style="width: 200px;margin-right: 20px"></el-input>
      <el-date-picker
          v-model="dateTime"
          value-format="yyyy-MM-dd hh:mm:ss"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="margin-right: 20px">
      </el-date-picker>
      答题时间(分钟)：
      <el-input-number v-model="answerTime" controls-position="right" :min="1" :max="10000"
                       style="width: 100px;margin-right: 20px"></el-input-number>
      题目数量：{{ problems.length }}
      及格分数：
      <el-input-number v-model="passScore" controls-position="right" :min="1" :max="10000"
                       style="width: 100px;margin-right: 20px"></el-input-number>
      <el-button style="padding: 3px 0" type="text" @click="publishPaper">发布试卷</el-button>
    </div>
    <div class="text">

      <div class="left">
        <h5 style="margin-bottom: 20px">题目</h5>
        <div v-for="(item,index) in problems">
          {{index+1}}、
          <div class="box">
            <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入题目"
                v-model="item.title">
            </el-input>
            <br>
            <el-input placeholder="请输入" v-model="item.optionA">
              <template slot="prepend">请输入A选项</template>
            </el-input>
            <el-input placeholder="请输入" v-model="item.optionB">
              <template slot="prepend">请输入B选项</template>
            </el-input>
            <el-input placeholder="请输入" v-model="item.optionC">
              <template slot="prepend">请输入C选项</template>
            </el-input>
            <el-input placeholder="请输入" v-model="item.optionD">
              <template slot="prepend">请输入D选项</template>
            </el-input>
            <el-input placeholder="请输入" v-model="item.correct">
              <template slot="prepend">正确选项</template>
            </el-input>
          </div>
          <hr style="margin: 40px"/>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" v-for="(item,index) in problems.length" style="width: 55px;height: 55px;margin: 5px"
                   circle>
          {{ index + 1 }}
        </el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" circle @click="upProblem"
                   style="width: 55px;height: 55px;margin: 5px"></el-button>

      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "PaperTch",
  data() {
    return {
      paperName: '',
      answerTime: 1,
      passScore: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateTime: '',
      problems: [],
    }
  },
  methods: {
    upProblem() {
      let problem = {
        title: '',
        optionA: '',
        optionB: '',
        optionC: '',
        optionD: '',
        correct:''
      }
      this.problems.push(problem)
    },
    publishPaper() {
      let reqData = {
        paperName:this.paperName,
        problemNum:this.problems.length,
        startDate:this.dateTime[0],
        endDate:this.dateTime[1],
        passScore:this.passScore,
        answerTime:this.answerTime,
        userId:this.$sessionGet().id,
        problems:this.problems
      }
      console.log(reqData)
      this.$axios.post("/paper/publishPaper",reqData)
          .then(resp=>{
            console.log(resp)
            this.$router.push("/square")
          })
          .catch(error=>{
            console.log(error)
          })
    },

  }
}
</script>

<style scoped>

/*.box {*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/

.text {
  border-radius: 30px;
  display: flex;
  justify-content: center;

}

.left {
  background-color: #fff;
  padding: 20px;
  margin: 20px;
  text-align: left;
  border-radius: 20px;
  width: 2500px;
  height: 100%;
}

.right {
  margin-top: 20px;
  margin-right: 20px;
  width: 600px;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  background-color: #f1f5f8;
  padding-bottom: 10px;
}
</style>